<template>
  <div class="page-container">

    <a-card style="width: 100%;min-height: calc(100vh - 130px)">
      <template #title>
        <ArrowLeftOutlined @click="formRef.resetFields();router.back()" style="margin-right: 10px" />
          添加设备
      </template>

      <a-form
        ref="formRef"
        :model="formState"
        :label-col="{ style: { width: '80px' } }"
        :wrapper-col="{ span: 6 }"
        autocomplete="off"
        size="large"
      >
        <a-form-item
          label="设备名称"
          name="deviceName"
          :rules="[{ required: true, message: '请输入设备名称' }]"
        >
          <a-input v-model:value="formState.deviceName" placeholder="请输入设备名称" />
        </a-form-item>

        <a-form-item name="productId" label="车型" :rules="[{ required: true, message: '请选择车型' }]">
          <a-select v-model:value="formState.productId"
                    :options="cardTypeOptions"
                    placeholder="请选择车型" allowClear></a-select>
        </a-form-item>

        <a-form-item
          label="vin"
          name="deviceVin"
          :rules="[{ required: true, message: '请输入如设备vin' }]"
        >
          <a-input v-model:value="formState.deviceVin" placeholder="请输入设备vin" />
        </a-form-item>

        <a-form-item name="deviceOs" label="操作系统">
          <a-select v-model:value="formState.deviceOs" placeholder="请选择操作系统" show-search
                    :options="osOptions" allowClear></a-select>
        </a-form-item>

        <a-form-item name="deviceClientType" label="客户端类型">
          <a-select v-model:value="formState.deviceClientType" placeholder="请选择客户端类型"
                    show-search
                    :options="clientTypeOptions" allowClear></a-select>
        </a-form-item>


        <a-form-item :wrapper-col="{ style: { marginLeft: '80px', marginTop: '80px' } }">
          <a-flex>
            <a-space :size="30">
              <a-button style="width: 220px" size="large" type="primary" @click="handleSubmit">提交</a-button>
            </a-space>
          </a-flex>
        </a-form-item>

      </a-form>

    </a-card>

  </div>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useDeviceSelectOptions } from '@/composables/useDeviceSelectOptions.ts'
import router from '@/router'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import {  message } from 'ant-design-vue'
const { osOptions, cardTypeOptions, clientTypeOptions } = useDeviceSelectOptions()
import { devicesApi } from '@/api/devices/index.ts'

const formState = reactive({
  productId: '',
  deviceVin: '',
  deviceType: '',
  deviceName: '',
  deviceClientType: '',
  deviceOs: '',
});

const formRef = ref();


const handleSubmit = async () => {
  console.log('handleSubmit')
  formRef.value.validate().then(async () => {
    const res = await devicesApi.addDevice(formState)
    console.log(res);
    if (res && res?.code === 200) {
      formRef.value.resetFields()
      message.success({ content: '添加成功'});
      router.back();
    } else {
      message.error({ content: res?.message || '添加失败'});
    }
  }).catch((error: any) => {
    console.log(error);
    message.error({ content: '请填写正确数据'});
    return
  })
};

</script>

<style scoped lang="less">
</style>
